<template>
  <!-- 直播分析-直播间对比 -->
  <div id="liveRoomCompare">
    <!-- <div v-if="vipRootObj[4][145].owner" class="isVipBox"> -->
    <div class="isVipBox">
      <el-tabs v-model="activeName">
        <div class="beforeSearch" v-show="searchDiv == 1">
          <div class="liveRoomCompare_box">
            <img src="../../../../assets/li/liveRoom.png" alt class="dyLogo" />
            <div class="liveRoomCompare_box2">
              <p class="liveRoomCompare_Gif">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </p>
            </div>
          </div>

          <p class="dbTitle">直播间对比</p>
          <p class="dbNote">
            支持多个直播间进行对比，添加直播间后可在已选中直播间查看。
            <span @click="example = true">查看示例</span>
          </p>
          <div class="searchBox">
            <el-input
              v-model="dyWords"
              placeholder=" 请输入抖音昵称或抖音号进行搜索"
              @keyup.enter.native="toSearch"
            ></el-input>
            <div class="imgBox" @click="toSearch">
              <img src="@/assets/meng/search01.png" alt />
            </div>
          </div>
        </div>
        <!-- 搜索后显示 -->
        <div class="afterSearch" v-show="searchDiv == 2">
          <!-- 左侧搜索结果 -->
          <div class="searchOutBox" v-if="searchOutBox">
            <div class="searchBox">
              <el-input
                v-model="dyWords"
                placeholder=" 请输入抖音昵称或抖音号进行搜索"
                @keyup.enter.native="toSearch"
              ></el-input>
              <div class="imgBox" @click="toSearch">
                <img src="@/assets/meng/search01.png" alt />
              </div>
            </div>
            <div class="seachRes">
              <section v-if="searchResList.length != 0 && !loading">
                <div
                  class="searchResItem"
                  v-for="(item, index) in searchResList"
                  :key="'b' + index"
                  @click="searchResItem(item)"
                >
                  <div class="avatorBox">
                    <div class="logoBox">
                      <img :src="item.logo" class="logoImg" v-errorImg:live />
                      <div v-if="item.is_delete == 2" class="delete">已封号</div>
                      <div class="delete" v-if="item.is_delete == 3">已注销</div>
                    </div>
                  </div>
                  <div class="talentInfo">
                    <div class="talentName">
                      <span>{{ item.nickname }}</span>
                      <img
                        src="../../../../assets/wang/talentCompare/shop.png"
                        v-if="item.is_shop == 1"
                      />
                      <!-- 个人认证 -->
                      <img
                        src="../../../../assets/wang/talentCompare/rzOrange.png"
                        v-if="item.verify_type == 1"
                        class="ideImg"
                      />
                      <!-- 企业认证 -->
                      <img
                        src="../../../../assets/wang/talentCompare/rzBlue.png"
                        v-if="item.verify_type == 2"
                        class="ideImg"
                      />
                    </div>
                    <p class="addTop">
                      <span>抖音号:</span>
                      <span>{{ item.unique_id }}</span>
                    </p>
                  </div>
                </div>
              </section>
              <div
                v-loading="loading"
                v-if="loading"
                class="loading"
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
              ></div>
              <div class="nodataBox" v-if="searchResList.length == 0 && !loading">
                <img src="@/assets/liu/zw.png" />
                <p>暂无数据</p>
              </div>
            </div>
          </div>
          <div class="searchOutBox" v-else>
            <div class="searchBox">
              <el-input
                v-model="dyWords"
                placeholder=" 请输入抖音昵称或抖音号进行搜索"
                @keyup.enter.native="toSearch"
              ></el-input>
              <div class="imgBox" @click="toSearch">
                <img src="@/assets/meng/search01.png" alt />
              </div>
            </div>
            <div class="seachRes">
              <section>
                <div class="searchResItem talentInfo02">
                  <div class="avatorBox">
                    <div class="logoBox logoBox02">
                      <img
                        :src="resItem.logo"
                        class="logoImg"
                        @click="go_to_page02(resItem.author_id)"
                      />
                      <div v-if="resItem.is_delete == 2" class="delete">已封号</div>
                      <div class="delete" v-if="resItem.is_delete == 3">已注销</div>
                    </div>
                  </div>
                  <div class="talentInfo talentInfo02">
                    <div class="talentName">
                      <span @click="go_to_page02(resItem.author_id)">
                        {{
                        resItem.nickname
                        }}
                      </span>
                      <img
                        src="../../../../assets/wang/talentCompare/shop.png"
                        v-if="resItem.is_shop == 1"
                      />
                      <!-- 个人认证 -->
                      <img
                        src="../../../../assets/wang/talentCompare/rzOrange.png"
                        v-if="resItem.verify_type == 1"
                        class="ideImg"
                      />
                      <!-- 企业认证 -->
                      <img
                        src="../../../../assets/wang/talentCompare/rzBlue.png"
                        v-if="resItem.verify_type == 2"
                        class="ideImg"
                      />
                    </div>
                    <p class="addTop">
                      <span>抖音号:</span>
                      <span>{{ resItem.unique_id }}</span>
                    </p>
                  </div>
                </div>
                <div v-if="liveRooms.length != 0">
                  <div class="liveItem" v-for="(roomItem, index) in liveRooms" :key="index">
                    <div class="liveItem_box">
                      <div class="liveItem_box_img">
                        <img :src="roomItem.roomLogo" alt @click="go_to_page01(roomItem.roomId)" />
                      </div>
                      <div class="talentInfo">
                        <div class="talentName">
                          <span @click="go_to_page01(roomItem.roomId)">
                            {{
                            roomItem.roomTitle
                            }}
                          </span>
                        </div>
                        <p class="addTop">
                          <span>开播时间:</span>
                          <span>
                            {{
                            timestamp(roomItem.beginTimeStamp, "Y/M/D h:m")
                            }}
                          </span>
                        </p>
                      </div>
                      <img
                        class="addImg"
                        src="../../../../assets/wang/talentCompare/add.png"
                        @click="toAdd(roomItem)"
                        v-if="!roomItem.inCompare"
                      />

                      <div v-if="roomItem.inCompare" class="added">已添加</div>
                    </div>
                    <div class="liveItem_box liveItem_box02">
                      <div>
                        <p class="live_num">{{ format_num(roomItem.totalPeople) }}</p>
                        <p class="live_title">累计观看人次</p>
                      </div>
                      <div>
                        <p
                          class="live_num"
                          v-if="roomItem.liveproduct != 0"
                        >{{ format_num(roomItem.liveproduct) }}</p>
                        <p class="live_num" v-else>--</p>
                        <p class="live_title">商品数</p>
                      </div>

                      <div>
                        <p
                          class="live_num"
                          v-if="roomItem.livevolume != 0"
                        >{{ format_num(roomItem.livevolume) }}</p>
                        <p class="live_num" v-else>--</p>
                        <p class="live_title">商品销量</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-loading="loading"
                  v-if="loading"
                  class="loading"
                  element-loading-text="拼命加载中..."
                  element-loading-spinner="el-icon-loading"
                ></div>
                <div class="nodataBox" v-if="liveRooms.length == 0 && !loading">
                  <img src="@/assets/liu/zw.png" />
                  <p>暂无数据</p>
                </div>
              </section>
            </div>
          </div>
          <!-- 右侧对比 -->
          <div class="compareBox">
            <div class="compareTitle">
              <div class="compareTitle_left">
                <div class="notice-box"></div>
                <span>已选中的直播间</span>
              </div>

              <div class="surplus">
                对比次数剩余
                <span>{{ surplusCount }}</span>次
              </div>
            </div>
            <div class="compareList">
              <div
                class="liveItem_box liveItem_box02"
                v-for="(item, index) in liveCompareList"
                :key="'c' + index"
              >
                <div class="liveItem_box_img">
                  <img :src="item.logoC" alt @click="go_to_page01(item.roomIdC)" v-errorImg:live />
                </div>
                <div class="talentInfo compareList_item">
                  <div class="talentName">
                    <span @click="go_to_page01(item.roomIdC)">
                      {{
                      item.nickNameC
                      }}
                    </span>
                  </div>
                  <p class="addTop">
                    <span>开播时间:</span>
                    <span>{{ timestamp(item.timeC, "Y/M/D h:m") }}</span>
                  </p>
                </div>
                <img
                  src="../../../../assets/li/cancel.png"
                  class="deleteImg"
                  @click="cancelAdd(index, item)"
                  @mouseover="overShow(item.roomIdC)"
                  v-if="!showIf || showId != item.roomIdC"
                />

                <img
                  src="../../../../assets/li/cancel02.png"
                  class="deleteImg"
                  @click="cancelAdd(index, item)"
                  @mouseleave="leaveShow()"
                  v-if="showId == item.roomIdC && showIf"
                />
              </div>
            </div>
            <div class="btnBox">
              <div class="cancelBtn" @click="cancelCompare">取消对比</div>

              <div class="confirmBtn_02" v-if="liveCompareList.length < 2">确定对比</div>
              <div
                class="confirmBtn btn"
                @click="confirmCompare"
                v-if="liveCompareList.length >= 2 && !showButton"
              >确定对比</div>
              <div
                class="confirmBtn boxShow"
                @click="confirmCompare"
                v-if="showButton && liveCompareList.length >= 2"
              >
                <div
                  v-if="showLoading1"
                  v-loading="showLoading1"
                  class="showLoading1"
                  element-loading-spinner="el-icon-loading"
                ></div>
                <div class="boxShow_text">对比中</div>
              </div>
            </div>
          </div>
        </div>
      </el-tabs>

      <!-- 示例 -->
      <el-dialog :visible.sync="example" :show-close="false">
        <div class="popBox">
          <div class="imgBox">
            <img src="../../../../assets/li/liveExample.png" />
            <img src="@/assets/wang/talentCompare/exampleIcon.png" />
          </div>
        </div>
        <img src="@/assets/wang/video/close.png" class="closeImg" @click="example = false" />
      </el-dialog>
    </div>
    <!-- <div v-else class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/talentCompare.jpg'" alt class="egBgImg" />
      <el-dialog
        :visible.sync="showEg"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
      >
        <div class="dialogEg">
          <payVip routerName="compare" :lowestVipNum="vipRootObj[4][145].ownerMinLevel" />
        </div>
      </el-dialog>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      activeName: 'first',
      dyWords: '',
      example: false,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      searchDiv: 1, //1:搜索前 2：搜索后
      searchResList: [],
      loading: true,
      surplusCount: '',
      liveCompareList: [],
      showLoading1: false,
      showButton: false,
      searchOutBox: true,
      resItem: [],
      liveRooms: [],
      loading01: true,
      showEg: true,
      showId: '',
      showIf: false
    };
  },
  computed: {},
  created() {
    localStorage.removeItem('liveCompareList');
    localStorage.removeItem('liveRoomList');
    this.$axios
      .get('/api/customer/GetNumberofvisitsDetailed', {
        params: {
          API: '/api/live/LiveCompare'
        }
      })
      .then(res => {
        if (res.data.code == 0) {
          this.surplusCount = res.data.data.surplusCount;
        }
      });
  },
  mounted() {},
  watch: {
    dyWords: function () {
      if (this.dyWords == '') {
        this.searchResList = [];

        this.toSearch();
      }
    }
  },
  methods: {
    // 搜索
    toSearch() {
      let that = this;
      this.searchOutBox = true;
      that.searchDiv = 2;
      that.loading = true;
      // that.$axios.get('/api/author/compare?nickname=' + that.dyWords)
      that.$axios
        .get('/api/author/compare', {
          params: {
            nickname: this.trimStr(that.dyWords)
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.searchResList = res.data.data;

            this.loading = false;
            // console.log('添加对比标志后', that.searchResList)
          } else if (res.data.code == 1002) {
            this.searchResList = [];
            this.loading = false;
          } else {
            this.loading = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消添加
    cancelAdd(index, item) {
      // 删除左面对比列表指定项并重新存储
      this.liveCompareList = JSON.parse(localStorage.getItem('liveCompareList'));
      this.liveCompareList.splice(index, 1);
      localStorage.setItem('liveCompareList', JSON.stringify(this.liveCompareList));
      //删除存储的对比id 重新存储删除后的 并且将左侧数组的对比标志改为false
      let delIndex = JSON.parse(localStorage.getItem('liveRoomList')).findIndex(
        i => i == item.roomIdC
      );
      let liveRoomList = JSON.parse(localStorage.getItem('liveRoomList'));
      liveRoomList.splice(delIndex, 1);
      localStorage.setItem('liveRoomList', JSON.stringify(liveRoomList));
      this.liveRooms.forEach(element => {
        if (element.roomId == item.roomIdC) {
          Object.assign(element, {
            inCompare: false
          });
        }
      });
      this.$message({
        message: '取消成功',
        center: true,
        duration: 1500,
        offset: 444,
        type: 'success'
      });
    },
    // 添加对比
    toAdd(item) {
      this.showIf = false;
      // 判断当前等待对比的数组长度 需大于2小于6
      if (this.liveCompareList.length < 5) {
        Object.assign(item, {
          inCompare: true
        });
        // console.log('添加对比后', this.searchResList)
        // 将该条数据存到待对比数组
        let compareObj = {};
        compareObj.logoC = item.roomLogo;
        compareObj.roomIdC = item.roomId;
        compareObj.nickNameC = item.roomTitle;
        compareObj.timeC = item.beginTimeStamp;
        // 存待对比数组
        if (JSON.parse(localStorage.getItem('liveCompareList'))) {
          this.liveCompareList = JSON.parse(localStorage.getItem('liveCompareList'));
        }

        this.liveCompareList.push(compareObj);

        localStorage.setItem('liveCompareList', JSON.stringify(this.liveCompareList));
        this.$message({
          message: '添加成功',
          center: true,
          duration: 1500,
          offset: 444,
          type: 'success'
        });
        // 存id
        let compareArr = [];
        if (JSON.parse(localStorage.getItem('liveRoomList'))) {
          compareArr = JSON.parse(localStorage.getItem('liveRoomList'));
        }
        compareArr.push(item.roomId);
        localStorage.setItem('liveRoomList', JSON.stringify(compareArr));
      } else {
        if (document.getElementsByClassName('el-message').length === 0) {
          this.$message({
            message: '对比直播间数不得超过5个',
            center: true,
            duration: 1500,
            offset: 444,
            type: 'warning'
          });
        }
      }
    },
    // 取消对比
    cancelCompare() {
      this.dyWords = '';
    },
    // 确定对比
    confirmCompare() {
      let that = this;
      // 对比人数需要大于2

      if (this.liveCompareList.length < 2) {
        this.$message({
          message: '请至少选择两位达人进行对比',
          center: true,
          duration: 1500,
          offset: 444,
          type: 'warning'
        });
      } else {
        this.$axios
          .get('/api/customer/GetNumberofvisitsDetailed', {
            params: {
              API: '/api/live/LiveCompare'
            }
          })
          .then(res => {
            if (res.data.code == 0) {
              this.surplusCount = res.data.data.surplusCount;
              // if (res.data.data.surplusCount) {
              this.showButton = true;
              this.showLoading1 = true;
              this.$axios
                .get(
                  '/api/live/LiveCompare',
                  {
                    params: {
                      roomids: JSON.parse(localStorage.getItem('liveRoomList')).join(',')
                    }
                  },
                  {
                    cancelToken: new that.$axios.CancelToken(function executor(c) {
                      if (that.cancel != null) {
                        that.cancel();
                      }
                      that.cancel = c;
                    })
                  }
                )
                .then(res => {
                  if (res.data.code == 0) {
                    this.showLoading1 = false;
                    this.$emit('childByValue', 4);
                  }
                  if(res.data.code == 1007){
                    this.showLoading1 = false;
                    this.showButton = false;
                    if (document.getElementsByClassName('el-message').length === 0) {
                      this.$message({
                        message: '您当前权限不足，请升级权限后点击查看',
                        type: 'warning',
                        offset: 90
                      });
                    }
                  }
                })
                .catch(err => {
                  console.log(err);
                });
              // } else {
              //   this.$message({
              //     message: "您的对比次数已用完，请升级您的会员等级。",
              //     duration: 2000,
              //     customClass: "includeMessage",
              //     offset: 154
              //   });
              // }
            }
          });
      }
    },

    // 取消按钮的鼠标悬停样式
    overShow(id) {
      this.showId = id;
      this.showIf = true;
    },
    leaveShow(id) {
      this.showIf = false;
      this.showId = '';
    },
    searchResItem(item) {
      this.resItem = item;
      this.loading = true;
      this.searchOutBox = false;
      this.$axios
        .get('/api/live/GetLiveByAuthorId', {
          params: {
            authorid: item.author_id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading = false;
            this.liveRooms = res.data.data;
            this.liveRooms.forEach(element => {
              if (
                JSON.parse(localStorage.getItem('liveCompareList')) &&
                JSON.parse(localStorage.getItem('liveRoomList')).includes(element.roomId)
              ) {
                Object.assign(element, {
                  inCompare: true
                });
              } else {
                Object.assign(element, {
                  inCompare: false
                });
              }
            });
          } else if (res.data.code == 1002) {
            this.liveRooms = [];
            this.loading = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    go_to_page02(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    }
  },
  components: {},
  beforeDestroy() {}
};
</script>

<style scoped lang="less">
#liveRoomCompare {
  background: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  min-height: 100vh;
  padding: 0 20px;
  // padding-top: 17px;
  // background-image: url(../../../../assets/wang/talentCompare/bg.png);
  background-image: url(../../../../assets/wang/talentCompare/bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 95%;
  // vip
  .isVipBox {
    // 搜索前显示
    .beforeSearch {
      margin: 0 auto;
      margin-top: 241px;
      text-align: center;
      .liveRoomCompare_box {
        width: 88px;
        height: 84px;
        margin: auto;
        position: relative;
        .dyLogo {
          width: 100%;
          height: 100%;
        }
      }

      .dbTitle {
        font-size: 34px;
        font-weight: 600;
        font-stretch: normal;
        line-height: 30px;
        letter-spacing: 1px;
        color: #222222;
        padding-top: 27px;
      }

      .dbNote {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 30px;
        letter-spacing: 0px;
        color: #555555;
        padding-top: 22px;

        span {
          color: #fd7f2c;
          cursor: pointer;
        }
      }
      .liveRoomCompare_box2 {
        position: absolute;
        left: 27%;
        top: 37px;
        width: 42px;
        height: 31px;
        p {
          width: 100%;
          height: 80%;
          overflow: hidden;
        }
      }
    }

    // 搜索框
    .searchBox {
      margin: 0 auto;
      margin-top: 50px;
      width: 600px;
      height: 48px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 2px #fd7f2c;
      .el-input {
        height: 100%;
        flex: 1;
      }

      .imgBox {
        height: 100%;
        width: 56px;
        background: #fd7f2c;

        cursor: pointer;

        img {
          width: 22px;
          height: 22px;
          display: block;
          margin: 0 auto;
          margin-top: 13px;
        }
      }
    }

    // 弹窗关闭
    .closeImg {
      cursor: pointer;
      position: absolute;
      width: 22px;
      height: 22px;
      right: 20px;
      top: 11px;
    }
    //示例图
    .popBox {
      background-color: #ffffff;
      border-radius: 4px;
      height: 85vh;
      overflow-y: auto;

      .imgBox {
        width: 100%;
        position: relative;

        img:nth-of-type(1) {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }

        img:nth-of-type(2) {
          width: 272px;
          height: 97px;
          position: absolute;
          left: 50%;
          top: 427px;
          transform: translate(-50%, 0);
        }
      }

      // min-width: 804px;
      // min-width: 1200px;
    }
    // 搜索后显示
    .afterSearch {
      width: 100%;
      margin-top: 88px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 50px;
      //  左侧搜索结果
      .searchOutBox {
        width: 600px;
        height: 600px;
        // margin: 0 auto;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        box-shadow: 0px 0px 16px 0px rgba(142, 142, 142, 0.3);

        .searchBox {
          width: 600px !important;
          margin-top: 0 !important;
        }

        // 搜索结果 最多5个
        .seachRes {
          width: 603px;
          height: 533px;
          overflow-y: auto;
          background-color: #fff;
          padding-top: 15px;

          .searchResItem {
            cursor: pointer;
            width: 549px;
            height: 78px;
            margin: 0 auto;
            display: flex;
            justify-content: start;
            align-items: center;
            border-bottom: solid 1px #e5e5e5;
            overflow: hidden;

            // padding: 20px 0;
            .avatorBox {
              .logoBox {
                position: relative;

                .logoImg {
                  cursor: pointer;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  display: block;
                  margin: 0 auto;
                  border: 1px solid #e5e5e5;
                }

                .delete {
                  width: 58px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  background-color: #f5f5f5;
                  border-radius: 12px;
                  border: solid 1px #e5e5e5;
                  font-size: 14px;
                  color: #222222;
                  position: absolute;
                  left: 50%;
                  bottom: 0;
                  transform: translate(-50%, 0);
                }
              }
            }
          }
          .liveItem {
            width: 549px;
            height: 104px;
            margin: 0 auto;
            border-bottom: 1px solid #e5e5e5;
            overflow: hidden;
            padding-top: 14px;
            padding-bottom: 14px;

            .liveItem_box02 {
              margin-top: 5px;
              justify-content: space-around;
              div {
                text-align: center;
              }
              .live_num {
                font-size: 20px;
                font-family: DINAlternate-Bold;
                color: #222222;
              }
              .live_title {
                font-size: 12px;

                color: #888888;
              }
            }
            .addImg {
              width: 26px;
              height: 26px;
              display: block;
              margin-left: 69px;
              cursor: pointer;
              outline: none;
            }
            .added {
              margin-left: 54px;
              font-size: 14px;
              font-weight: normal;

              color: #888888;
            }
          }
          // 搜索无结果
          .nodataBox {
            img {
              width: 218px;
              height: 175px;
              display: block;
              margin: 0 auto;
              margin-top: 150px;
            }

            p {
              font-size: 16px;
              color: #888888;
              text-align: center;
            }
          }
        }
      }

      // 右侧对比
      .compareBox {
        width: 360px;
        height: 600px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        margin-left: 20px;
        position: relative;
        box-shadow: 0px 0px 16px 0px rgba(142, 142, 142, 0.3);

        .compareTitle {
          display: flex;
          justify-content: start;
          align-items: center;
          margin-top: 21px;
          justify-content: space-between;

          .notice-box {
            display: inline-block;
            width: 4px;
            height: 16px;
            border-radius: 100px;
            margin-right: 6px;
            background-color: #fd7f2c;
            margin-left: 20px;
          }
          .surplus {
            font-size: 14px;
            color: #888888;
            margin-right: 20px;
            span {
              font-size: 14px;
              color: #fd7f2c;
            }
          }
          span {
            font-size: 16px;
            font-weight: 600;
            color: #222222;
          }
          .compareTitle_left {
            display: flex;
            align-items: center;
          }
        }

        .compareList {
          width: 100%;
          padding-left: 20px;
          padding-right: 20px;
          .compareItem {
            // width: 307px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 20px;
            margin-top: 20px;

            .startBox {
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }

            .logoBox {
              position: relative;
              width: 50px;
              height: 50px;

              .logoImg {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: block;
                margin: 0 auto;
                border: 1px solid #e5e5e5;
              }

              .delete {
                width: 50px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background-color: #f5f5f5;
                border-radius: 12px;
                border: solid 1px #e5e5e5;
                font-size: 12px;
                color: #222222;
                position: absolute;
                left: 50%;
                bottom: -2px;
                transform: translate(-50%, 0);
              }
            }

            span {
              flex: 1;
              text-align: left;
              display: inline-block;
              max-width: 146px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 14px;
              color: #222222;
              font-weight: 600;
              padding-left: 8px;
            }
          }
          .compareList_item {
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .liveItem_box {
            margin-top: 20px;
          }
        }

        .btnBox {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          bottom: 28px;

          .cancelBtn,
          .confirmBtn,
          .confirmBtn_02 {
            width: 100px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            border-radius: 4px;
            font-size: 14px;
          }

          .cancelBtn {
            cursor: pointer;
            border-radius: 4px;
            border: solid 1px #e5e5e5;
            color: #888888;
          }

          .confirmBtn {
            cursor: pointer;
            border: solid 1px #fd7f2c;
            color: #fd7f2c;
            margin-left: 20px;
          }
          .btn:hover {
            border-color: #ff924b;
            color: #ff924b;
          }
          .boxShow {
            position: relative;
            border: solid 1px #fd7f2c;
            color: #ff924b;
          }
          .confirmBtn_02 {
            border: 1px solid #e5e5e5;
            color: #888888;
            background: #f9f9f9;
            margin-left: 20px;
          }
        }

        .boxShow_text {
          position: absolute;
          left: 38px;
        }
      }
    }
  }
  .talentInfo {
    width: 384px;
    margin-left: 8px;

    .talentName {
      // line-height: 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      span {
        display: inline-block;
        max-width: 265px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #222222;
      }
      span:hover {
        color: #ff924b;
      }
      img {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 9px;
      }
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      letter-spacing: 0px;
      color: #888888;
      // padding-top: 15px;
      // line-height: 30px;
    }

    .addTop {
      padding-top: 6px;
    }

    p:nth-of-type(2) {
      overflow: hidden;

      span {
        float: left;
      }

      span:nth-of-type(2) {
        display: inline-block;
        width: 342px;
      }
    }
  }
  .liveItem_box {
    display: flex;
    height: 50%;
    align-items: center;
    .liveItem_box_img {
      width: 50px;
      height: 50px;

      img {
        cursor: pointer;
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
    .deleteImg {
      width: 32px;
      height: 32px;
      cursor: pointer;
      position: absolute;
      right: 31px;
    }
  }
  .talentInfo02 {
    cursor: default !important;
  }
}
</style>
